import { useIntervalFn } from '@vueuse/core'
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

// 倒计时逻辑函数
/**
 * 核心逻辑，每个1秒减1
 * 技术点:定时器 time--
 * 具体用啥？ vueUse useIntervalFn
 */
function userCountDown () {
  // 1.响应式数据 负责显示倒计时数据
  const time = ref(0)
  // xx分xx秒  dayjs  unix() 处理成秒  format('mm分ss秒') 格式化方法
  // 每个一秒钟 执行一下your function
  const formatTime = computed(() => {
    return dayjs.unix(time.value).format('mm分ss秒')
  })
  // 逻辑：每隔1秒执行，自己的函数，把我们想每隔一秒的事情，放到 /* your function */的位置写
  // pause:暂停，只要调用，倒计时就会暂停
  // resume：开始只要调用 倒计时就会开始
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    // 判断等于0就会终止
    // 只写retrun 和return pause()区别是啥
    // 本质区别就是是否会清除定时器
    // 如果只是return效果上不一样，但是定时器还在，回调函数也还会执行的
    if (time.value === 1) {
      pause()
    }
    time.value--
  }, 1000)
  // 2.开始函数,调用此方法开始倒计时
  function start (startTime) {
    time.value = startTime
    // 正式倒计时
    resume()
  }
  // 3.stop为停止倒计时，调用此方法可以停止倒计时
  function stop () {
    pause()
  }
  return {
    time,
    start,
    stop,
    formatTime
  }
}
export default userCountDown
